<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%-- <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%> --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>添加员工页面</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
</head>
<body>
<h2>Success</h2>
<script  type="text/javascript">
	$(document).ready(function(){
		
		$("#addEmpForm :submit").click(function(){
			
			$.ajax({
				type:"POST",
				url:"${pageContext.request.contextPath}/saveEmployeeByAjax",
				async:true,
				data:JSON.stringify({
					ename:$("#ename").val(),
					job:$("#job").val(),
					hiredate:$("#hiredate").val(),
					sal:$("#sal").val(),
					comm:$("#comm").val(),
					department:{deptNo:$("#departmentNo").val()}
				}),
				//dataType:"json",
				contentType: "application/json;charset=utf-8", //这个是发送信息至服务器时内容编码类型
				success:function(data){
					if(data == "save"){
						//alert(data);
						
						$("#message").html("成功"+data);
						//调用显示方法
						showEmps();
						
					}
					else
						$("#message").html("失败"+data);
				},
				error:function(){
					alert("添加失败");
				}
			});
			
			return false;
		});/* add结束 */
		
		
		function showEmps(){
			var $empsTable = $("#showEmps");
			$empsTable.empty();
			$.ajax({
				type:"GET",
				url:"getAllEmployeeByAjax",
				async:true,
				contentType:"json",
				success:function(data){
					//alert(data);
					var str = "<tr><th>编号</th><th>姓名</th><th>工作</th><th>经理</th><th>入职时间</th><th>薪水</th><th>部门</th><th>操作</th></tr>";
					$.each(data, function(i, element){
						
						da = new Date(element.hiredate);
					    var year = da.getFullYear();
					    var month = da.getMonth()+1;
					    var date = da.getDate();
					    date_s = year+"-"+month+"-"+date;
					    
						str+="<tr><td class = 'empNo'>"+element.empNo+
						"</td><td>"+element.ename+
						"</td><td>"+element.job+
						"</td><td>"+(element.mgr ==null?"":element.mgr.ename)+
						"</td><td>"+date_s+
						"</td><td>"+element.sal+
						"</td><td>"+(element.department.dname==null?"":element.department.dname)+
						"</td><td><a href = 'toDetails/"+ element.empNo+"'>修改</a><a class='del' href = ''>删除</a></td></tr>"; 
					});
					//console.log(str);
					$empsTable.append(str);
					
					/* 删除
					 */
					$(".del").click(function(){	
						var $empNo = $(this).parent().parent().children('.empNo').html();
						console.log($empNo);
						var $tr = $(this).parent().parent();
						$.ajax({
							url:"deleteEmpById/"+$empNo ,
							type:"POST",
							//data:{"empNo":empNo},
							success:function(data){
								//alert(data);
								$tr.remove();
							},
							error:function(){
								alert("失败");
							}
							
						});
						return false;
					});
					
				},
				error:function(){
					alert("错误");
				}
			});
		}/* showEmp结束 */
	});
</script>
<br>
<div>
	<form action="saveEmployeeByAjax" id = "addEmpForm" method = "post">
		姓名：<input name="ename" id="ename"/><br>
		工作：<input type="text" name="job" id="job"/><br>
		入职时间：<input type="text" name="hiredate" id="hiredate"/><br> 
		工资：<input type="text" name="sal" id="sal"/><br>
		奖金：<input type="text" name="comm" id="comm"/><br>
		部门：
	  		<select name="department.deptNo" >
	  			<c:forEach items="${requestScope.departments}" var="dept">
	  				<option  id="departmentNo" value="${dept.deptNo}" >${dept.dname}</option>
	  			</c:forEach>
	  		</select> 
		<input type= "submit" value = "提交"/>
	
	
	</form>
	<span id = "message"></span>
</div>
<hr>
<div>
	<table id = "showEmps">
	
	
	</table>

</div>

</body>
</html>
